<template>
  <div class="com-user-avatar" :class="{ transparent: isTransparent }">
    <el-dropdown @command="handleCommand" @visible-change="handleVisibleChange">
      <span class="avatar-dropdown">
        <el-avatar :src="avatar" class="user-avatar"/>
        <div class="avatar-content">
          <div class="user-name" v-if="contexInfo">{{
            contexInfo.userName || VINTEX_username || contexInfo.telNum
          }}</div>
          <div class="org-name" v-if="contexInfo">{{ contexInfo.instFName || contexInfo.instName }}</div>
        </div>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item class="blue" command="organList">
            <div class="blue">切换机构</div>
          </el-dropdown-item>
          <el-dropdown-item command="PersonalCenter">
            <div class="center">个人中心</div>
          </el-dropdown-item>
          <el-dropdown-item command="modifyPassword">
            <div class="center">修改密码</div>
          </el-dropdown-item>
          <el-dropdown-item command="DeRegister">
            <div class="center">注销账户</div>
          </el-dropdown-item>
          <el-dropdown-item command="news">
            <div class="center">消息中心</div>
          </el-dropdown-item>
          <el-dropdown-item command="logout">
            <div class="center1">退出登录</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <DialogModifyPassword ref="modifyPasswordDialog" />
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import { Avatar } from 'element-ui';

export default {
  name: 'PageHeaderAvatar',
  components: {
    [Avatar.name]: Avatar,
    DialogModifyPassword: () => import('./DialogModifyPassword.vue')
  },
  props: {
    isTransparent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      active: false,
      VINTEX_username: ''// 网站缓存的用户名
    };
  },
  computed: {
    ...mapGetters({
      avatar: 'avatar',
      userInfo: 'globalUserInfo',
      contexInfo: 'contexInfo'
    })
  },
  created () {
    this.VINTEX_username = JSON.parse(localStorage.getItem('VINTEX_username'));
  },
  methods: {
    ...mapActions({
      _logout: 'user/logout'
    }),
    handleCommand (command) {
      switch (command) {
        case 'logout':
          this.logout();
          break;
        case 'modifyPassword':
          this.$refs.modifyPasswordDialog.show();
          break;
        case 'organList':
          // 切换机构
          window.location = process.env.VUE_APP_SERVICE_CHANGEORG;
          break;
        case 'DeRegister':
          // 账户注销
          window.location = process.env.VUE_APP_SERVICE_USERDEREGISTERAPPLY;
        break;
        case 'news':
          // 消息中心
          window.location = process.env.VUE_APP_SERVICE_NEWCENTER;
          break;
        case 'PersonalCenter':
          window.location = process.env.VUE_APP_SERVICE_PERSONALCENTERDAOHE;
          break;
      }
    },
    handleVisibleChange (val) {
      this.active = val;
    },
    async logout () {
      this.$store.commit('clearLoginUserInfo');
      // 清空缓存；
      localStorage.clear();
      window.location = process.env.VUE_APP_COSWEBURL;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/global-variables.scss";
.el-dropdown-menu__item{
  &.blue{
    // background: #E6E8EE;
    border-bottom: 1px solid #E6E8EE;
    box-shadow: 0px 2px 4px rgba(209, 221, 236, 0.8);
    padding-bottom: 7px;
  }
  .blue{
    width: 82px;
    height: 31px;
    background: linear-gradient(260.7deg, #E0F1FF 13.1%, rgba(240, 248, 255, 0.67) 87.78%);
    border-radius: 4px;
    font-family: 'Songti SC';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 31px;
    color: #0072DF;
    text-align: center;
  }
  .center{
    text-align: center;
    width: 82px;
    font-family: 'Songti SC';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #606266;
    margin: 12px 0 16px;
  }
  .center1{
    text-align: center;
    width: 82px;
    font-family: 'Songti SC';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: #606266;
    margin-bottom: 6px;
  }
}
.com-user-avatar {
  margin-left: 20px;

  &.transparent {
    .user-name,
    .org-name {
      color: #fff !important;
    }
  }
}

.avatar-dropdown {
  display: flex;
  height: $page-header-height;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;

  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
  }

  .avatar-content {
    position: relative;
    margin-left: 10px;
    cursor: pointer;

    .user-name {
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }

    .org-name {
      margin-top: 2px;
      font-size: 14px;
    }
  }
}
</style>
